let oBox = document.getElementById("shopping-neirong-center-bigimgs");
let oShowImgBox = document.getElementById("shopping-neirong-center-bigimgs1");
let oMirrorBox = document.getElementById("shopping-neirong-center-bigimgs2");
let boxWidth = 550;
let boxHeight = 550;
let mirrorWidth = 120;
let mirrorHeight = 240;

window.onload = function() {
    oBox.onmouseover = function() {
        oShowImgBox.style.display = "block";
        oMirrorBox.style.display = "block";
    }
    oBox.onmouseout = function() {
        oShowImgBox.style.display = "none";
        oMirrorBox.style.display = "none";
    }
    oBox.onmousemove = function(event) {
        let e = event || window.event;

        let left1 = e.pageX - oBox.offsetLeft - mirrorWidth / 2;
        let top1 = e.pageY - oBox.offsetTop - mirrorHeight / 2;
        if (left1 < 0) {
            left1 = 0
        } else if (left1 > boxWidth - mirrorWidth) {
            left1 = boxWidth - mirrorWidth
        }
        if (top1 < 0) {
            top1 = 0
        } else if (top1 > boxHeight - mirrorHeight) {
            top1 = boxHeight - mirrorHeight
        }
        oMirrorBox.style.left = left1 + "px";
        oMirrorBox.style.top = top1 + "px";

        oShowImgBox.style.backgroundPosition = `-${left1*2}px -${top1*2}px`;

    }
}